<script setup>
const props = defineProps({
    pageWidth: {
        type: Number,
        default: 1000
    }
})
</script>

<template>
    <div class="blog-page" :style="{ width: `${pageWidth}px` }">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
@use '@/assets/variables.scss' as *;

.blog-page {
    min-height: 500px;
    // background: #fff;
    background: var(--header-color);
    padding: 20px;
    position: relative;
    box-shadow: 0 1.25rem 1rem 0.3125rem var(--header-color);
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 10px;
        // background: #019875;
        // background: linear-gradient(to bottom, #019875, #fff);
        background: var(--header-color);

        top: -10px;
        left: 0px;
    }
}
</style>